<template>
  <div class="login-page whitebg">
    <div class="login-justify">
      <span @click="backLastPage">取消</span>
      <router-link to="/regist" tag="span">快速注册</router-link>
    </div>
    <div class="shiliao-logo">
      <img src="../../assets/himages/logo.png" alt="">
    </div>
    <div class="login-user-info">
      <p>
        <i class="iconfont icon-wode2"></i>
        <input type="text" placeholder="手机号" @change="getTell" v-model="username">
      </p>
      <p>
        <i class="iconfont icon-mima login-icon-weight"></i>
        <input type="text" placeholder="密码" @change="getMiMa" v-model="password">
      </p>
      <div class="prompts-msg">{{ prompts }}</div>
      <div class="login-btn" @click="getUserIfo">登录</div>
      <router-link to="/forget" tag="div" class="login-forget-password">
        忘记密码？
      </router-link>
    </div>
  </div>
</template>

<script>
import { setMsg } from '../../webstorage'
import * as userXinxi from '../../webstorage/consts'
  export default {
    name: 'Login',
    data () {
      return {
        username: '',
        password: '',
        prompts: ''
      }
    },
    methods: {
      backLastPage () {
        window.history.back();
      },
      getTell () {
        //只能输入手机号
        let result = (/^1[34578]\d{9}$/).test(this.username)
        if(!result){
          this.prompts = '请输入手机号';
          this.username = '';
        }
      },
      getMiMa () {
        console.log(this.password)
      },
      getUserIfo () {
        //将用户信息发送到后台进行验证
        this.$axios.post(this.HOST+'/api/userinfon',{
          'username': this.username,
          'password': this.password
        })
        .then(res => {
          if(res.data.msg === 'success'){
            // 验证成功后返回跳来登录的界面，并将用户信息存入本地
            setMsg (userXinxi.USERINFO,this.username);
            this.prompts = '';
            this.$router.push('/'+decodeURIComponent(this.$route.params.router));   
          }else{
            // 验证失败就继续登录,清空用户信息
            this.password = '';
            this.prompts = '用户名或密码错误'
          }
        })
        .catch(error => {
          console.log(error)
        })

      }
    }
  }
</script>

<style scoped>
.login-page{
  font-size: 0.3rem;
}
.login-justify{
  padding: 0.52rem 0.57rem;
  color: #13bf92;
}
.login-justify span{
  display: inline-block;
}
.login-justify span:first-child{
  float: left;
}
.login-justify span:last-child{
  float: right;
}
/*logo*/
.shiliao-logo{
  height: 4rem;
  line-height: 4rem;
  text-align: center;
}
.shiliao-logo img{
  width: 2rem;
}
/*user infomation*/
.login-user-info{
  width: 5.7rem;
  margin: 0 auto;
}
.login-user-info p{
  position: relative;
}
.login-user-info p i{
  position: absolute;
  top: 0.08rem;
  left: 0.03rem; 
  font-size: 0.38rem;
}
.login-icon-weight{
  font-weight: bold;
}
.login-user-info input{
  width: 100%;
  height: 0.65rem;
  outline: none;
  border-bottom: 1px solid #13bf92;
  font-size: 0.3rem;
  padding-left: 0.5rem;
  margin-bottom: 0.68rem;
}
.prompts-msg{
  color: #ff0000;
  font-size: 0.28rem;
}
/*login button*/
.login-btn{
  width: 100%;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
  color: #fff;
  background-color: #13bf92;
  border-radius: 0.1rem;
  margin-top: 0.35rem;
}
/*forget login password*/
.login-forget-password{
  margin-top: 0.2rem;
  text-align: right;
}
.login-forget-password:hover{
  color: #666;
}


</style>